<template>
    <div class="addOrEdit">
        <el-form ref="form" :rules="rules"  :model="form" label-width="80px">
            <el-form-item label="模块名" class="model">
                <el-input class="el-inputmode" readonly v-model="modelistId.assemblyName"></el-input>
            </el-form-item>

            <el-form-item label="异常地址：" prop="addrPlc">
                <el-input v-model="form.addrPlc"></el-input>
            </el-form-item>
            <el-form-item label="异常信息：" prop="exceptMessageCn">
                <el-input v-model="form.exceptMessageCn"></el-input>
            </el-form-item>
            <el-form-item label="异常信息（英）：" prop="exceptMessage">
                <el-input v-model="form.exceptMessage"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">{{ this.editList.exceptId ? '修改' : '保存' }}</el-button>
            </el-form-item>
        </el-form>
        <div class="err_box" v-show="isbool">
            {{ title }}
        </div>
    </div>
</template>
<script>
import { saveExcept_list, editExcept } from '@/api/fulitModelApi/index.js'
export default {
    props: ['editList', 'modelistId'],
    data() {
        return {
            rules: {
                addrPlc: { required: true, message: "请输入名称", trigger: 'blur' },
                exceptMessageCn: { required: true, message: "请输入中文", trigger: 'blur' },
                exceptMessage: { required: true, message: "请输入英文", trigger: 'blur' },

            },
            form: {
                assemblyName: "",
                addrPlc: "",
                exceptMessageCn: "内容内容",
                exceptMessage: "abcd",
                equipmentId: "",
                assemblyId: "",

            },
            isbool: false,
            title: "",
            time: ""
        }
    },
    mounted() {
        this.form.equipmentId = this.$store.state.UserIndex.equipment.equipmentId;

    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.editList.exceptId) {

                        editExcept({
                            exceptId: this.editList.exceptId,
                            addrPlc: this.form.addrPlc,
                            exceptMessage: this.form.exceptMessage,
                            exceptMessageCn: this.form.exceptMessageCn,
                            assemblyId: this.modelistId.assemblyId
                        }).then(res => {
                            if (res.code == 200) {
                                this.$emit("excEptClick", false)
                            }
                        })
                    } else {
                        saveExcept_list({
                            addrPlc: this.form.addrPlc,
                            exceptMessage: this.form.exceptMessage,

                            exceptMessageCn: this.form.exceptMessageCn,
                            assemblyId: this.modelistId.assemblyId
                        }).then(res => {
                            if (res.code == 200) {
                                this.$emit("excEptClick", false)
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    watch: {
        editList: function (newval, oldval) {
            if (newval.exceptId) {


                this.form.addrPlc = newval.addrPlc;
                this.form.exceptMessage = newval.exceptMessage;
                this.form.exceptMessageCn = newval.exceptMessageCn;
            } else {
                this.form.addrPlc = "";
                this.form.exceptMessage = "";
                this.form.exceptMessageCn = "";
            }
        }
    }
}
</script>
<style lang="less" scoped>
.addOrEdit {
    width: 100%;
    height: 100%;
    position: relative;

    .err_box {
        position: absolute;
        width: 95%;
        top: 120px;
        text-align: center;
        overflow-x: auto;
        padding: 10px;
        background: rgba(45, 36, 62);
        color: rgb(150, 84, 94);
        // border: 0.44px solid #ffd4d4;
        border-radius: 3px;
        font-family: "思源黑体", "Microsoft YaHei";
        font-weight: 400;
        font-size: 16px;
    }

}

.el-form /deep/ .model {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 31px;
}

.el-inputmode {
    margin-left: 0px !important;

    /deep/ input {
        background: none !important;
    }
}

.el-form .model /deep/ .el-form-item__label {
    width: 80px !important;

}
/deep/ .el-form-item__error {
     text-align: right;
     left: 30px !important;
 }
.el-select {
    width: 100% !important;

}

.el-form-item {
    margin-bottom: 10px;
}

.el-form-item {
    display: flex;
    flex-direction: column;
}

.el-input {
    width: 90%;
    margin-left: 21px;
}

.el-input /deep/ .el-input__inner {


    background-color: #030c20;
    color: white;
    opacity: 1;
    border: 0px solid #5B9FC3;
}

.el-form-item /deep/ .el-form-item__content {
    margin-left: 0px !important;
}

.el-form-item /deep/ .el-form-item__label {
    width: 50% !important;
    text-align: left;
    color: white;
    margin-left: 21px;
    line-height: 35px !important;
}

.el-button--primary {
    width: 128px;
    height: 38px;
    background: #031231;
    opacity: 1;
    border: 1px solid #5B9FC3;
    margin: 7px 37%;
    cursor: pointer;
}

.el-form {
    margin-top: 5px;
}
</style>